<template>
  <!-- 定义一个容器用于显示网络拓扑图 -->

  <div class="image">
    <img class="send1" src="@/assets/images/yolosend.png" />
    <img class="receive1" src="@/assets/images/yoloreceive.png" />
    <img class="send2" src="@/assets/images/yolosend.png" />
    <img class="receive2" src="@/assets/images/yoloreceive.png" />
  </div>
  <div id="yolo-topology" style="width: 100%; height: 100%;"></div>

</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'NetworkTopology',
  data() {
    return {
      myChart: null,
      option: {
        initChart: {
          series: [
            {
              type: 'graph',
              layout: 'none',
              data: [
                { name: '目标检测\n客户端', x: 0, y: 100, symbol: 'image://' + require('@/assets/icon/ue.png'), symbolSize: [80, 90] },
                { name: 'NWDAF', x: 50, y: 70, symbol: 'image://' + require('@/assets/icon/nwdaf1.png'), symbolSize: [110, 90] },
                { name: 'xxx', x: 50, y: 130, symbol: 'none', symbolSize: [90, 90] },
                { name: '业务识别模型', x: 60, y: 70, symbol: 'circle', symbolSize: [0, 0], label: { show: true, formatter:'{b}', position:'right', rotate: 0, color: 'white' } },
                { name: '核心网', x: 50, y: 100, symbol: 'image://' + require('@/assets/images/pod.png'), symbolSize: [150,140] },
                { name: '目标检测\n服务端', x: 100, y: 100, symbol: 'image://' + require('@/assets/icon/server.png'), symbolSize: [80, 90] },
                { name: '客户端发送', x: 0, y: 97, symbol: 'none', symbolSize: [80, 90] },
                { name: '客户端接收', x: 0, y: 101, symbol: 'none', symbolSize: [80, 90] },
                { name: '服务端接收', x: 100, y: 97, symbol: 'none', symbolSize: [80, 90] },
                { name: '服务端发送', x: 100, y: 101, symbol: 'none', symbolSize: [80, 90] },
                { name: '核心网1', x: 54, y: 97.5, symbol: 'none', symbolSize: [200, 200] },
                { name: '核心网2', x: 46, y: 101.5, symbol: 'none', symbolSize: [200, 200] },
              ],
              links: [
                { source: '客户端发送', target: '核心网1', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' }, symbol: ['none', 'arrow'], symbolSize: 20, },
                { source: '核心网1', target: '服务端接收', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' }, symbol: ['none', 'arrow'], symbolSize: 20, },
                { source: '服务端发送', target: '核心网2', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' }, symbol: ['none', 'arrow'], symbolSize: 20, },
                { source: '核心网2', target: '客户端接收', label: { show: true, formatter: '', position: 'middle', rotate: 0, color: 'white' }, symbol: ['none', 'arrow'], symbolSize: 20, },
              ], // 初始化为空
              label: {
                show: true,
                position: 'bottom',
                formatter: '{b}',
                color: 'white',
                fontSize: 30,
              },
              lineStyle: {
                curveness: 0,
                width: 5,
                color: 'white',
                opacity: 1,
              },
            }
          ],
        },
      }
    };
  },
  mounted() {
    this.initChart();
  },
  beforeUnmount() {
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
  methods: {
    initChart() {
      const container = document.getElementById('yolo-topology');
      if (container) {
        if (this.myChart) {
          this.myChart.setOption(this.option.initChart);
        } else {
          this.myChart = echarts.init(container);
          this.$nextTick(() => {
            this.myChart.setOption(this.option.initChart);
          })
        }
      }
    },
  }
};
</script>

<style scoped>
/* 设置容器的宽度和高度 */
#network-topology {
  position: relative;
  width: 100%;
  height: 100%;
}

.send1 {
  position: absolute;
  top: 29%;
  left: 20%;
  width: 20%;
  border: white solid 5px;
}

.receive1 {
  position: absolute;
  top: 57%;
  left: 20%;
  width: 20%;
  border: white solid 5px;
}

.send2 {
  position: absolute;
  top: 29%;
  left: 62%;
  width: 20%;
  border: white solid 5px;
}

.receive2 {
  position: absolute;
  top: 57%;
  left: 62%;
  width: 20%;
  border: white solid 5px;
}
</style>
